<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>商城首页</title>
    <link rel="icon" href="/web页面/logo3.png" type="image/png">
    <script src="axios.min.js"></script>
    <script src="vue.global.js"></script>
    <style>
        .body{
            background: #ffffff;

        }
        .dise{
            background: #d9d6d6;
        }
        h2{
            padding-left: 50px;
        }
        .top-container{
            width: 100%;
            height: 100px;
            background: #333333;
        }
        .logo{
            float: left;
            width: 25%;
            height: 100px;
            display: grid;
            place-items: center;

        }
        .caidain{
            padding-left: 100px;
            float: left;
            width: 55%;
            height: 100px;
        }
        .welcome-message {
            display: inline-block;
            padding-left: 8%; /* 保持与导航按钮的间距 */
            line-height: 100px; /* 保持与导航按钮的高度一致 */
            color: #fd6801;
            font-size: 16px; /* 设置合适的字体大小 */
        }
        .search-bar input {
            padding: 5px;
            width: 200px;
            border-radius: 20px;
            border: 1px solid #ccc;
            height: 42px;
            margin-top:25px ;
        }
        .search-bar button {
            padding: 17px;
            background-color: #fa6a02;
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 20px;
            transition: background-color 0.3s ease;
        }
        .search-bar button :hover{
            color: #656464;
        }
        a {
            text-decoration: none; /* 移除下划线 */
            color: #ffffff; /* 设置默认颜色为黑色 */
        }
        .nav-btn{
            float:left;
            padding-left: 8%;
            line-height: 100px;
        }
        .nav-btn :hover{
            color: #fd6800;
        }
        .kongge{
            float: left;
            padding-left: 10px;
            padding-right: 10px;
            line-height: 100px;
        }
        .lunbo{
            width: 80%;
            height: 620px;
            background: #ffffff;
            margin: auto;
        }
        .zuolunbo{
            float: left;
            width: 20%;
            height: 600px;
            background: #cbcaca;
        }
        .zuolunbo li{
            width: 100%;
            height: 100px;
            list-style-type: none;
            line-height: 100px;
            text-indent: 40px;
        }
        .zuolunbo li:hover{
            background-color: #fd6800;
        }
        .zuolunbo ul li a {
            display: block;
            color: #000000;
            text-decoration: none; /* 去掉下划线 */
            font-size: 18px;
        }
        .zuolunbo ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .youlunbo{
            background-color: #f1ecec;
            float: left;
            width: 80%;
            height: 600px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .carousel-item {
            width: 100%;
            height: 600px;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .carousel-item:first-child {
            display: block;
            opacity: 1; /* 第一张图片初始透明度为1 */
        }
        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
        }
        .prev {
            left: 10px;
        }
        .next {
            right: 10px;
        }
        .guanggao{
            width: 80%;
            height: 150px;
            margin: auto;

        }
        .guanggaotu{
            width: 100%;
            height: 150px;
            top: 0;
            left: 0;
        }
        .phone{
            width: 80%;
            height: 400px;
            margin: auto;

        }
        .product-item {
            background-color: white;
            float: left;
            width: 22.5%;
            height: 380px;
            margin-left: 35px ;
            margin-bottom: 35px;
            text-align: center;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;

        }
        .product-item1{
            background-color: white;
            float: left;
            width: 22.5%;
            height: 796px;
            margin-left: 35px ;
            margin-bottom: 35px;
            text-align: center;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        .product-item1:hover {
            transform: scale(1.05);
        }
        .product-item1 img {
            width: 100%;
            height: 796px;
            object-fit: cover;
            border-radius: 8px;
        }
        .product-item1 h4 {
            margin: 10px 0;
            font-size: 16px;
            color: #333;
        }

        .product-item1 .price {
            font-size: 14px;
            color: #e60012;
        }
        .product-item:hover {
            transform: scale(1.05);
        }

        .product-item img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 8px;
        }

        .product-item h4 {
            margin: 10px 0;
            font-size: 16px;
            color: #333;
        }

        .product-item .price {
            font-size: 14px;
            color: #e60012;
        }
        .watch{
            width: 80%;
            height: 400px;
            background: #ffd350;
            margin: auto;

        }
        .ipad{
            width: 80%;
            height: 870px;
            margin: auto;

        }
        .footer{
            width: 100%;
            height: 350px;
            background: #8250ff;
        }
        .hover{

        }

        /* 侧边栏样式 */
        .sidebar {
            position: fixed;  /* 固定定位 */
            top: 350px;  /* 初始位置，距离顶部 */
            right: 20px;  /* 固定在右侧 */
            width: 90px;  /* 侧边栏宽度 */
            background-color: #9f9d9d;
            color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* 侧边栏项 */
        .sidebar-item {
            margin-bottom: 20px;
        }

        /* 按钮样式 */
        .sidebar-btn {
            background-color: #ff6600;
            color: white;
            border: none;
            padding: 10px;
            width: 100%;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .sidebar-btn:hover {
            background-color: #e65c00;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .sidebar {
                width: 150px; /* 在小屏幕上稍微缩小侧边栏 */
            }

            .content {
                padding-left: 150px; /* 对应缩小的侧边栏 */
            }
        }




    </style>
</head>
<body >
 <div class="top-container">
     <div class="logo"><img src="web页面/logo.jpg" height="72" width="73"/></div>
<div  class="caidain">
     <div class="nav-btn"><a class="hover" href="http://127.0.0.1:8080/good.html?category=1" target="_blank">Xiaomi手机</a></div>
    <div class="nav-btn"><a class="hover" href="http://127.0.0.1:8080/good.html?category=2" target="_blank">平板</a></div>
    <div class="nav-btn"><a class="hover" href="http://127.0.0.1:8080/good.html?category=4" target="_blank">笔记本</a></div>
     <div class="nav-btn"><a class="hover" href="http://127.0.0.1:8080/good.html?category=5" target="_blank">穿戴</a></div>
     <div class="nav-btn"><a class="hover" href="http://127.0.0.1:8080/good.html?category=3" target="_blank">家电</a></div>
    <div class="nav-btn" id="login-register-container" style="color: #fc6a01"><a class="hover" href="http://127.0.0.1:8080/login.html">登录</a></div>
    <span class="kongge" id="kongde" style="color: #fc6a01">||</span>
    <div class="nav-btn" style="padding-left: 0 ;color: #fc6a01" id="register-container" ><a class="hover" href="http://127.0.0.1:8080/registration.html">注册</a></div>
    <button id="logout-button" style=" display: none ;color: #fc6a01; border: none; background: none; cursor: pointer;">退出</button>
</div>

     <script>
         // 添加退出按钮的事件监听器
         document.getElementById('logout-button').addEventListener('click', function() {
             // 发送请求到服务器端的注销API（如果有的话）
             // 这里假设服务器端的注销API是/logout
             axios.post('/logout')
                 .then(function(response) {
                     // 清除本地会话
                     document.getElementById('welcome-message').textContent = '';
                     document.getElementById('logout-button').style.display = 'none';
                     // 显示登录和注册按钮
                     document.getElementById('login-register-container').style.display = 'inline-block';
                     document.getElementById('register-container').style.display = 'inline-block';
                     document.getElementById('kongde').style.display = 'inline-block';


                 })
                 .catch(function(error) {
                     alert("用户已登出");
                     // 刷新页面
                     window.location.reload();
                     console.error('Error during logout:', error);
                 });
         });

         document.addEventListener("DOMContentLoaded", function() {
             // 发送 AJAX 请求到服务器以检查用户是否登录
             axios.get('/check-login-status')
                 .then(function(response) {
                     // 假设服务器返回一个对象，其中包含用户ID
                     var user_id = response.data.user_id;
                     var nickname = response.data.nickname;


                     // 获取购物车和订单按钮
                     var cartButton = document.getElementById('cart-button');
                     var orderButton = document.getElementById('service-button');

                     // 查找登录和注册按钮的容器
                     var loginRegisterContainer = document.getElementById('login-register-container');
                     var registerContainer = document.getElementById('register-container');
                     var kongde=document.getElementById('kongde')
                     document.getElementById('logout-button').style.display = 'inline-block';


                     // 如果用户已登录，则隐藏登录和注册按钮
                     if (user_id) {

                         loginRegisterContainer.style.display = 'none';
                         registerContainer.style.display = 'none';
                         kongde.style.display='none';

                         // 创建欢迎信息元素
                         var welcomeMessage = document.createElement('span');
                         welcomeMessage.textContent = '欢迎用户     '   +nickname+'   浏览小米商城';
                         welcomeMessage.style.color = '#FC6A01FF';
                         welcomeMessage.className = 'welcome-message';



                         loginRegisterContainer.parentNode.insertBefore(welcomeMessage, loginRegisterContainer);
                     }
                 })
                 .catch(function(error) {
                     console.error('Error checking login status:', error);
                 });
         });
     </script>

 </div>
 <br/>


 <!-- 侧边栏 -->
 <div id="sidebar" class="sidebar">
     <div class="sidebar-item">
         <a href="http://127.0.0.1:8080/carts.html" > <button id="cart-button" class="sidebar-btn">购物车</button></a>
     </div>
     <div class="sidebar-item">
         <a href="http://127.0.0.1:8080/orders.html" > <button id="service-button" class="sidebar-btn">订单</button></a>
     </div>
 </div>




<div class="lunbo">
    <!-- 轮播图部分左菜单 -->
    <div class="zuolunbo">
          <ul>
              <li><a href="http://127.0.0.1:8080/good.html?category=1" target="_blank" class="hover">手机</a></li>
              <li><a href="http://127.0.0.1:8080/good.html?category=2" target="_blank" class="hover">平板</a></li>
              <li><a href="http://127.0.0.1:8080/good.html?category=3" target="_blank" class="hover">家电</a></li>
              <li><a href="http://127.0.0.1:8080/good.html?category=4" target="_blank" class="hover">笔记本</a></li>
              <li><a href="http://127.0.0.1:8080/good.html?category=5" target="_blank" class="hover">穿戴</a></li>
              <li><a href="http://127.0.0.1:8080/good.html?category=6" target="_blank" class="hover">电源配件</a></li>
          </ul>
    </div>
    <!-- 轮播图主体 -->
    <div class="youlunbo">
        <a href="http://127.0.0.1:8080/xq.html?id=58"><img src="web页面/goods/加湿器.webp" class="carousel-item"></a>
        <a href="http://127.0.0.1:8080/xq.html?id=24"><img src="web页面/goods/冰箱.webp" class="carousel-item"></a>
        <a href="http://127.0.0.1:8080/xq.html?id=20"><img src="web页面/goods/显示器.jpg" class="carousel-item"></a>
        <a href="http://127.0.0.1:8080/xq.html?id=1"><img src="web页面/goods/1940.jpg" class="carousel-item"></a>
        <a href="http://127.0.0.1:8080/xq.html?id=4"><img src="web页面/goods/473.jpg" class="carousel-item"></a>
        <button class="prev">&#10094;</button> <!-- 左箭头 -->
        <button class="next">&#10095;</button> <!-- 右箭头 -->
    </div>
    <script>
        const carouselItems = document.querySelectorAll('.carousel-item');
        const prevButton = document.querySelector('.prev');
        const nextButton = document.querySelector('.next');

        let currentIndex = 0;
        const itemCount = carouselItems.length;
        const transitionDuration = 100; // 设置淡入淡出动画的持续时间

        function showSlide(index) {
            carouselItems.forEach((item, i) => {
                if (i === index) {
                    item.style.display = 'block';
                    item.style.opacity = 0;
                    setTimeout(() => {
                        item.style.opacity = 1;
                    }, transitionDuration); // 延迟时间与动画持续时间一致
                } else {
                    item.style.display = 'none';
                    item.style.opacity = 0;
                }
            });
        }

        function nextSlide() {
            // 先将当前图片淡出
            carouselItems[currentIndex].style.opacity = 0;
            setTimeout(() => {
                // 等淡出动画完成后，再切换到下一张图片
                currentIndex = (currentIndex + 1) % itemCount;
                showSlide(currentIndex);
            }, transitionDuration);
        }

        function prevSlide() {
            // 先将当前图片淡出
            carouselItems[currentIndex].style.opacity = 0;
            setTimeout(() => {
                // 等淡出动画完成后，再切换到上一张图片
                currentIndex = (currentIndex - 1 + itemCount) % itemCount;
                showSlide(currentIndex);
            }, transitionDuration);
        }

        prevButton.addEventListener('click', prevSlide);
        nextButton.addEventListener('click', nextSlide);

        setInterval(nextSlide, 5000); // 每3秒自动切换下一张图片
        window.onload = function() {
            showSlide(currentIndex);
        };</script>

</div>
 <br/>
 <!-- 粉底色区域 -->
 <div class="dise">
 <br/>
 <br/>
 <div class="guanggao">
     <a href="http://127.0.0.1:8080/xq.html?id=3">
     <img src="web页面/goods/广告.jpg" class="guanggaotu"/>
     </a>
 </div>
 <br/>

 <div class="phone">
     <h2>手机展示</h2>
     <a href="http://127.0.0.1:8080/xq.html?id=2">
     <div class="product-item">

         <img src="web页面/goods/xiaomi13.png" height="709" width="945"/><h4>小米13</h4>
         <div class="price">￥3499</div>
     </div>
     </a>
     <a href="http://127.0.0.1:8080/xq.html?id=3">
     <div class="product-item">

         <img src="web页面/goods/REDMI%20K80.png" height="800" width="800"/><h4>REDMI K80</h4>
         <div class="price">￥2499</div>
     </div>
     </a>
     <a href="http://127.0.0.1:8080/xq.html?id=1">
     <div class="product-item">

         <img src="web页面/goods/小米15.jpg" height="800" width="800"/><h4>小米15</h4>
         <div class="price">￥4799</div>
     </div>
     </a>
     <a href="http://127.0.0.1:8080/xq.html?id=4">
     <div class="product-item">

         <img src="web页面/goods/红米14.jpg" height="800" width="800"/><h4>Redmi Note 14Pro</h4>
         <div class="price">￥1399 </div>
     </div>
     </a>
 </div>
 <br/><br/>
 <div class="ipad">
     <h2> 平板|笔记本展示</h2>
     <a href="http://127.0.0.1:8080/xq.html?id=55">

     <div class="product-item1">

         <img src="web页面/goods/平板1.jpg" height="768" width="293"/>
     </div>
     </a>
     <a href="http://127.0.0.1:8080/xq.html?id=5">
     <div class="product-item">

         <img src="web页面/goods/pad7pro.webp" height="897" width="1440"/><h4>Xiaomi Pad 7 Pro</h4>
         <div class="price">￥2499</div>
     </div>
     </a>
     <a href="http://127.0.0.1:8080/xq.html?id=6">
     <div class="product-item">

         <img src="web页面/goods/pad7pro.webp" height="897" width="1440"/><h4>Xiaomi Pad 7</h4>
         <div class="price">￥1999</div>
     </div>
     </a>
     <a href="http://127.0.0.1:8080/xq.html?id=7">
     <div class="product-item">

         <img src="web页面/goods/5daddaa651568673e87eaf7c15ebd1cb.webp" height="250" width="250"/><h4>Redmi Pad Pro</h4>
         <div class="price">￥1499 </div>
     </div>
     </a>
     <a href="http://127.0.0.1:8080/xq.html?id=8">
     <div class="product-item">

     <img src="web页面/goods/pms_1718360987.64664232.png" height="800" width="800"/><h4>Redmi Book 14 2024</h4>
     <div class="price">￥4399</div>
 </div>
     </a>
     <a href="http://127.0.0.1:8080/xq.html?id=9">
     <div class="product-item">

         <img src="web页面/goods/AD8B18BB6C6A0D31375FEB3A5FE10FE1.png" height="800" width="800"/><h4>Redmi Book Pro 16 2024</h4>
         <div class="price">￥6399</div>
     </div>
     </a>
     <a href="http://127.0.0.1:8080/xq.html?id=52">
     <div class="product-item">

         <h4><img src="web页面/goods/1E064650023F85E9D145E98C6EE61C66.png" height="800" width="800"/>Redmi Book 16 2024</h4>
         <div class="price">￥3699</div>
     </div>
     </a>


 </div>
 <br/><br/>

 </div>

</body>
</html>